<template>
	<div class="">
		<div class="bg">
			<div class="top">
				<div class="main">
					<div class="login_header">
						<img class="logos" src="../assets/images/logo.png" alt="">
						<div class="shu"></div>
						<div>智慧工单管理系统</div>
					</div>

				</div>
			</div>
			<div class="main hei">
				<div class="login_box">
					<div class="login_title">用户登录</div>
					<div class="inps">
						<img src="../assets/images/usered.png" v-if="uf" class="login_icon" alt="">
						<img src="../assets/images/user.png" v-else class="login_icon" alt="">
						<input type="text" @keydown.enter="$refs.pass.focus()" v-model="username" @focus="uf=true"
							@blur="uf=false" class="form-control" placeholder="请输入账号" aria-describedby="basic-addon1">
					</div>
					<div class="inps">
						<img src="../assets/images/pass.png" v-if="pf" class="login_icon" alt="">
						<img src="../assets/images/passdef.png" v-else class="login_icon" alt="">
						<input type="password" @keydown.enter="$refs.code.focus()" ref="pass" v-model="pass"
							@focus="pf=true" @blur="pf=false" class="form-control" placeholder="请输入密码"
							aria-describedby="basic-addon1">
					</div>
					<div class="inps">
						<img src="../assets/images/yzmed.png" v-if="cf" class="login_icon" alt="">
						<img src="../assets/images/yzm.png" v-else class="login_icon" alt="">
						<input type="text" ref="code" @keydown.enter="sub" v-model="code" @focus="cf=true"
							@blur="cf=false" class="form-control yzminp" placeholder="请输入验证码"
							aria-describedby="basic-addon1">
						<img :src="url" alt="" @click="getcode" class="yzm" id="canvas_img">
						<!-- <VerificationCode  :changeCode.sync='identifyCode'></VerificationCode> -->
					</div>
					<div class="login_btn" @click="sub">登 录</div>
					<div class="login_zhu" @click="goreg">
						还没有账号？<router-link to="">用户注册</router-link>
					</div>

				</div>
			</div>
			<div class="foot">
				<div>版权所有：南京阳途信息科技有限公司</div>
				<a href="https://beian.miit.gov.cn" target="_blank">备案号：苏ICP备12017337号-7</a>
			</div>

		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>

	</div>
</template>
<script>
	import Vue from 'vue'
	import $ from 'jquery'
	// import VerificationCode from '@/components/verificationCode';
	export default {
		components: {
			// VerificationCode
		},
		name: "login",
		data() {
			return {
				showloading: false,
				username: "",
				pass: "",
				code: "",
				uuid: "",
				url: "",
				uf: false,
				pf: false,
				cf: false,
				showreg: false,
				// identifyCode: '', //当前生成的验证码
			};
		},
		mounted() {

			var url = window.location.origin; //去掉右括号
			var url = 'https://192.168.1.35'; //去掉右括号
			Vue.prototype.$url = url + '/gd'
			sessionStorage.setItem('url', url + '/gd')

			var urls = window.location.search
			if (urls) {
				var dz_url = urls.split('?')[1];
				var cs = dz_url.split('=')[0];
				var cs2 = dz_url.split('=')[1];

				if (cs == 'SNUM' && cs2 != '') {
					this.showreg = true
				}
			}

			this.getcode()
		},

		methods: {
			goreg() {
				if (this.showreg) {
					this.$router.push('/reg')
				} else {
					this.$alert('请联系客服，电话 025-86587880', '提示', {
						confirmButtonText: '确定',
						callback: action => {}
					});
				}
			},
			sub() {
				if (this.code == '' || this.username == '' || this.pass == '') {
					this.$Toast("请填写完整");
					return
				}
				// console.log(this.uuid)
				this.showloading = true
				var param = {
					username: this.username,
					password: this.pass,
					code: this.code,
					uuid: this.uuid
				}
				// console.log(param.uuid)
				var that = this
				this.$http.post(this.$url + '/login', this.$qs.stringify(param))
					.then(function(response) {
						that.showloading = false
						if (response.data.success) {
							sessionStorage.setItem('token', response.headers['authorization'])
							sessionStorage.setItem('uname', response.data.data.username)
							// sessionStorage.setItem('uid', response.data.data.userId)
							sessionStorage.setItem('rou', 1)
							that.$router.push('/index')
						} else {
							that.getcode()
						}
						that.$Toast(response.data.msg);

					})
					.catch(function(error) {
						console.log(error);
					});
			},
			getcode() {
				this.showloading = true
				sessionStorage.setItem('token', '')
				var that = this
				this.$http.get(this.$url + '/vercode', {
						responseType: 'blob',
					}, {
						Headers: {
							Authorization: ''
						}
					})
					.then(function(response) {
						// console.log(response)
						// that.url = response.data
						that.uuid = response.headers['uuid']; //获取图片类型
						// console.log(that.uuid)
						let canvas_img = document.querySelector('#canvas_img');
						let imageType = response.headers['content-type']; //获取图片类型

						const blob = new Blob([response.data], {
							type: imageType
						})
						const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
						canvas_img.src = imageUrl;
						canvas_img.onload = function(e) {
							window.URL.revokeObjectURL(canvas_img.src); //释放URL.createObjectURL()创建的对象
						};
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						// location.reload()
					});
			},

		},
	};
</script>
<style lang='less' scoped>
	.login_zhu a {
		color: #4286F5;
	}

	.login_zhu {
		font-size: 16px;
		font-family: MicrosoftYaHei-, MicrosoftYaHei;
		font-weight: normal;
		color: #737373;
		text-align: right;
	}

	.login_btn {
		width: 320px;
		height: 46px;
		background: #4286F5;
		border-radius: 6px;
		font-size: 18px;
		line-height: 46px;
		text-align: center;
		color: #FFFFFF;
		margin-bottom: 22px;
		cursor: pointer;
	}

	.yzminp {
		padding-right: 110px;
	}

	.yzm {
		position: absolute;
		right: 5px;
		top: 9px;
		width: 92px;
		height: 31px;
	}

	.inps input {
		height: 46px;
		padding-left: 42px;
	}

	.login_icon {
		position: absolute;
		left: 13px;
		top: 12px;
	}

	.inps {
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 25px;
	}

	.login_title {
		font-size: 30px;
		color: #4286F5;
		text-align: center;
		margin-bottom: 29px;
	}

	.login_box {
		width: 412px;
		/* height: 473px; */
		background: #FFFFFF;
		box-shadow: 0px 0px 15px 1px rgba(224, 224, 224, 0.5);
		border-radius: 10px 10px 10px 10px;
		padding-top: 36px;
		padding-left: 44px;
		padding-right: 48px;
		padding-bottom: 64px;
	}

	.hei {
		height: calc(100vh - 88px - 78px) !important;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.foot {
		height: 88px;
		background: #FFFFFF;
		text-align: center;
		color: #a3a3a3;
		padding-top: 17px;
		box-sizing: border-box;
		font-size: 14px;
	}
	.foot a{
		color: #a3a3a3;
	}

	.shu {
		width: 1px;
		height: 39px;
		background: #DCDCDC;
		margin-left: 8px;
		margin-right: 16px;
	}

	.login_header {
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 27px;
		font-family: MicrosoftYaHei-, MicrosoftYaHei;
		color: #404040;
	}

	.logos {
		width: 112px;
	}

	.main {
		width: 1200px;
		margin: 0 auto;
		height: 100%;
	}

	.top {
		background: #fff;
		height: 78px;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		background: url(../assets/images/loginbg.png) no-repeat;
		background-size: cover;

	}
</style>
